<template>
<nut-popup round  v-model="Nut_Popup_show" position="bottom" :z-index="3" 
:overlay-style="overlayStyle" class="NutPopup" @click-overlay="overlayBtn" v-if="Nut_Popup_show">
    <div class="C1FCdiv2">
        <span style="margin-left:18px;font-size:14px">已选商品</span>
        <span style="margin-left:5px;font-size:12px;color:rgb(151,151,151)">（ 暂不收包装费 ？）</span>
        <span style="float:right;margin-right:20px;font-size:13px" @click="clearAll">清空</span>
    </div>
    <div style="margin-top:55px;"></div>
    <div class="C1FCdiv1" v-for="(data , index) in axiosCartDate" :key="index">
        <img :src="axiossmallimageinfo[index]" class="img1">
        <span class="span1">{{data.title}}</span>
        <span class="span2"><span style="font-size:11px;font-weight:700">￥</span>{{(data.realprice*FoodNum[index]).toFixed(2)}}</span>
        <img src="../../../../../assets/ttimg/add.png" class="img2" @click="addnum(index)">
        <span class="span3">{{FoodNum[index]}}</span>
        <img src="../../../../../assets/ttimg/reduce.png" class="img2" @click="reducenum(index)">
    </div>
    <!-- <div class="C1FCdiv1">
        <img src="../../../../../assets/ttimg/huntun.png" class="img1">
        <span class="span1">鲜肉馄饨</span>
        <span class="span2"><span style="font-size:11px;font-weight:700">￥</span>9.9</span>
        <img src="../../../../../assets/ttimg/add.png" class="img2" @click="addnum(0)">
        <span class="span3">{{FoodNum[0]}}</span>
        <img src="../../../../../assets/ttimg/reduce.png" class="img2" @click="reducenum(0)">
    </div>
    <div class="C1FCdiv1">
        <img src="../../../../../assets/ttimg/zajiangmian.png" class="img1">
        <span class="span1">杂酱面</span>
        <span class="span2"><span style="font-size:11px;font-weight:700">￥</span>9.9</span>
        <img src="../../../../../assets/ttimg/add.png" class="img2" @click="addnum(1)">
        <span class="span3">{{FoodNum[1]}}</span>
        <img src="../../../../../assets/ttimg/reduce.png" class="img2" @click="reducenum(1)">
    </div> -->
    <div style="margin-bottom:20px"></div>
</nut-popup>
</template>

<script>
import axios from 'axios'
export default {
    name:'C1FoodCart',
    data(){
        return{
            Nut_Popup_show:false,
            overlayStyle: {backgroundColor:'rgba(0, 0, 0, .53)'},
            FoodNum:[0,0],
            // axiosCartDate:[{uid:12,pid:2000001},{uid:12,pid:2000002},{uid:12,pid:10000001}],
            axiosCartDate:[{'realprice':''}],
            axiossmallimageinfo:[],
        }
    },
    methods:{
        addnum(i){
            this.$addr.get(`carts/${this.axiosCartDate[i].cid}/${this.FoodNum[i]+1}/changenum`).then(
                response=>{
                    console.log('请求修改cid为',this.axiosCartDate[i].cid,'的数量',this.FoodNum[i]+1,'成功了',response)
                    this.$set(this.FoodNum,i,this.FoodNum[i]+1)
                    this.$bus.$emit('CartChangeNum',this.axiosCartDate[i].cid,1)
                    },
                error=>{
                    console.log('请求修改数量失败了',error.message)
                })
        },
        reducenum(i){
            console.log('删除的i是多少:',i,'axiosCartDate:',this.axiosCartDate);
            if(this.FoodNum[i] > 1){
                this.$addr.get(`carts/${this.axiosCartDate[i].cid}/${this.FoodNum[i]-1}/changenum`).then(
                    response=>{
                        console.log('请求修改cid为',this.axiosCartDate[i].cid,'的数量',this.FoodNum[i]-1,'成功了',response)
                        this.$set(this.FoodNum,i,this.FoodNum[i]-1)
                        this.$bus.$emit('CartChangeNum',this.axiosCartDate[i].cid,-1)
                        },
                    error=>{
                        console.log('请求修改数量失败了',error.message)
                    })
            }else{
                this.$addr.get(`carts/${this.axiosCartDate[i].cid}/delete`).then(
                    response=>{
                        console.log('请求删除数量为1的购物车成功了',response)
                        // this.$set(this.FoodNum,i,this.FoodNum[i]-1)
                        if(this.axiosCartDate.length == 1){
                            this.axiosCartDate.splice(i,1)
                            this.Nut_Popup_show=false
                            this.$bus.$emit('overlayBtn',false)
                            this.$bus.$emit('CartChangeNum',0,0)
                        }else{
                            this.$bus.$emit('CartChangeNum',this.axiosCartDate[i].cid,-1)   //先发送给它cid的信息,要不然cid会变
                            this.axiosCartDate.splice(i,1)
                            for(let i=0;i<this.axiosCartDate.length;i++){
                                this.FoodNum[i]=this.axiosCartDate[i].num
                                this.axiosCartDate[i].realprice=(this.axiosCartDate[i].price*0.6).toFixed(1)
                                this.axiossmallimageinfo[i]=require(`../../../../../assets/${this.axiosCartDate[i].image.slice(13)}1.jpg`)
                            }
                        }
                        },
                    error=>{
                        console.log('请求删除数量为1的购物车失败了',error.message)
                    })
            }
        },
        overlayBtn(){
            this.$bus.$emit('overlayBtn',false)
        },
        clearAll(){
            for(let i=0 ; i<this.axiosCartDate.length; i++){
                this.$addr.get(`carts/${this.axiosCartDate[i].cid}/delete`).then(
                    response=>{
                        console.log('请求清空购物车成功了',response)
                        this.$set(this.FoodNum,i,0)
                        this.$bus.$emit('CartChangeNum',this.axiosCartDate[i].cid,0)
                        this.Nut_Popup_show=false
                        this.$bus.$emit('overlayBtn',false)
                        },
                    error=>{
                        console.log('请求清空购物车失败了',error.message)
                    })
            }
        },
    },
    mounted(){
        this.$bus.$on('Nut_Popup_show',(value)=>{
            this.axiosCartDate=[]
            this.$addr.get(`carts`).then(
                response=>{
                    console.log('请求获取该用户购物车信息成功了',response)
                    for( let i=0,j=0; i<response.data.data.length; i++){
                        if(response.data.data[i].pid.toString().indexOf('20000') != -1){
                            this.axiosCartDate[j]=response.data.data[i]
                            this.FoodNum[j]=response.data.data[i].num
                            // Math.round(this.axiosData.price*0.6)*this.mynumber
                            this.axiosCartDate[j].realprice=(response.data.data[i].price*0.6).toFixed(1)
                            this.axiossmallimageinfo[j]=require(`../../../../../assets/${response.data.data[i].image.slice(13)}1.jpg`)
                            j++
                        }
                    }
                },
                error=>{
                    console.log('请求获取该用户购物车信息商品详情失败了',error.message)
                }
            )
            setTimeout(() => {
                this.Nut_Popup_show=value
            }, 300);
        })
    },
    beforeDestroy(){
        this.$bus.$off('Nut_Popup_show')
    }
}
</script>

<style scoped>
.NutPopup{
    padding-bottom: 60px;
    max-height: 65%;
}
.C1FCdiv2{
    margin-top: 15px;
    padding-bottom: 15px;
    position: fixed;
    height: 20px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    z-index: 4;
}
.C1FCdiv1{
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
}
.img1{
    width: 70px;
    border-radius: 5px;
    height: 65px;
}
.span1{
    position: absolute;
    font-size: 14px;
    font-weight: 800;
    margin-top: -2px;
    margin-left: 10px;
}
.span2{
    color: rgb(255, 37, 55);
    font-weight: 500;
    font-size: 18px;
    margin-left: 10px;
    position: absolute;
    margin-top: 45px;
}
.span3{
    float: right;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 45px;
}
.img2{
    float: right;
    width: 24px;
    margin-top: 42px;
}
</style>